<template>
  <div class="home">
    <!-- <div v-drag></div> -->
    <div class="changeColor" v-color="color"></div>

    <button @click="randomColor">点击</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      color:'red',
      arr: ['red', 'yellow', 'green', 'pink', 'blue']
    }
  },
  directives: {
    color: {
      bind(el, binding, vnode) {
        // console.log(el, binding);
        el.style.background = binding.value
      },
      insert() {

      },
      update(el, binding) {
        // console.log(el);
        el.style.background = binding.value
      }
    }
  },


  methods:{
    randomColor() {
      let ind = Math.round(Math.random()*4)
      this.color = this.arr[ind]
      console.log(this.color);
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    position: relative;
  }
  .changeColor {
    width: 100px;
    height: 100px;
  }
</style>
